<template>
  <div class="container">
    <div class="top">
      <div class="header-title">
        <div class="header-avatar">
          <img src="../assets/logo.png"/>
        </div>
        <div class="header-name">
          <div class="text">SPeed TALK 云</div>
        </div>
      </div>
      <div class="header-nav-left">
        <div class="nav-item">
          <div class="text">最新活动</div>
        </div>
        <div class="nav-item">
          <div class="text">产品</div>
        </div>
        <div class="nav-item">
          <div class="text">解决方案</div>
        </div>
        <div class="nav-item">
          <div class="text">云市场</div>
        </div>
        <div class="nav-item">
          <div class="text">合作伙伴</div>
        </div>
        <div class="nav-item">
          <div class="text">支持与服务</div>
        </div>
        <div class="nav-item">
          <div class="text">开发者</div>
        </div>
        <div class="nav-item">
          <div class="text">了解 Talk 云</div>
        </div>
      </div>
      <div class="header-search">
        <img @mouseleave="searchHover = false" @mouseover="searchHover = true"
             :src="searchHover ? require('../assets/search-color.svg') : require('../assets/search-plain.svg')"/>
      </div>
      <div class="header-nav-right">
        <div class="nav-item">
          <div class="text">中国站</div>
        </div>
        <div class="nav-item">
          <div class="text">文档</div>
        </div>
        <div class="nav-item">
          <div class="text">购物车</div>
        </div>
        <div class="nav-item">
          <div class="text">IPC备案</div>
        </div>
        <div class="nav-item">
          <div class="text">控制台</div>
        </div>
      </div>
      <div @click="$router.push('/login')" class="header-right">
        <div class="text">立即注册</div>
      </div>
    </div>
    <div class="drawer-content">
      <div class="left">
        <div class="side-title">
          <div class="text">
            查看全部产品
          </div>
        </div>
        <div class="side-item-body">
          <div v-for="item in sideTextList" class="text-wrap">
            <div class="side-text">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <a-row>
          <a-col :span="24">
            <div class="search-input">
              <a-input-search class="input" placeholder="搜索云产品或解决方案"/>
            </div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <div class="search-content">
              <div v-for="(item, index) in searchContentList" :key="index" class="module-item-content">
                <a-row>
                  <a-col :span="24">
                    <div class="module-title">
                      {{ item.title }}
                    </div>
                  </a-col>
                </a-row>
                <a-divider/>
                <a-row>
                  <a-col :span="24">
                    <div class="module-item-body">
                      <div v-for="(child, _index) in item.dataList" :key="_index" class="module-item">
                        <div class="text">
                          <div class="left-text">
                            {{ child.title }}
                          </div>
                          <div class="right-tag">
                            <a-button v-if="child.isTest" style="margin-top: -6px" type="link">
                              公测中
                            </a-button>
                            <div v-if="child.isNew" class="right-tag">
                              <a-tag color="#f50">
                                NEW
                              </a-tag>
                            </div>
                            <div v-if="child.isHot" class="right-tag">
                              <a-tag color="#f50">
                                HOT
                              </a-tag>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>

</template>

<script>

export default {
  data() {
    return {
      searchHover: false,
      sideTextList: [
        '热门产品',
        '弹性计算',
        '存储',
        '数据库',
        '安全',
        '大数据',
        '人工智能',
        '网络与CDN',
        '视频服务',
        '容器与中间件',
        '开发与运维',
      ],
      searchContentList: [
        {
          title: '业务中台组件',
          dataList: [
            {title: '登录认证授权', route: '', isHot: true, isTest: false, isNew: false},
            {title: 'OBS 对象存储', route: '', isHot: true, isTest: false, isNew: false},
            {title: '验证码短信', route: '', isHot: false, isTest: false, isNew: true},
            {title: '邮件发送', route: '', isHot: false, isTest: false, isNew: false},
            {title: '邮件通知', route: '', isHot: true, isTest: false, isNew: false},
            {title: '钉钉告警', route: '', isHot: false, isTest: true, isNew: false},
            {title: '聚合支付', route: '', isHot: true, isTest: false, isNew: false},
            {title: '人脸识别', route: '', isHot: true, isTest: false, isNew: false},
            {title: '行为式验证码', route: '', isHot: false, isTest: true, isNew: false},
            {title: '广告推送', route: '', isHot: false, isTest: false, isNew: false},
            {title: '客服聊天', route: '', isHot: false, isTest: false, isNew: false},
            {title: '视频语音通话', route: '', isHot: true, isTest: false, isNew: false},
            {title: '图形识别', route: '', isHot: false, isTest: false, isNew: true},
            {title: 'ORM 框架', route: '', isHot: false, isTest: false, isNew: true},
            {title: '数据脱敏', route: '', isHot: false, isTest: false, isNew: false},
            {title: '全局 uid', route: '', isHot: false, isTest: false, isNew: false},
            {title: '工作流引擎', route: '', isHot: false, isTest: false, isNew: false},
            {title: '电子签章', route: '', isHot: false, isTest: false, isNew: false},
            {title: '合同签订', route: '', isHot: false, isTest: false, isNew: false},
            {title: '在线文件预览', route: '', isHot: false, isTest: false, isNew: false},
            {title: '在线文档编辑', route: '', isHot: false, isTest: false, isNew: false},
            {title: '数据库文档', route: '', isHot: false, isTest: false, isNew: false},
          ]
        },
        {
          title: '数据中台组件',
          dataList: [
            {title: '分布式日志', route: '', isHot: false, isTest: true, isNew: false},
            {title: '运维监控可视化', route: '', isHot: false, isTest: false, isNew: false},
            {title: '日志分析', route: '', isHot: false, isTest: false, isNew: false},
            {title: '数据仓库', route: '', isHot: false, isTest: false, isNew: false},
            {title: '数据可视化', route: '', isHot: true, isTest: false, isNew: false},
            {title: '数据集成', route: '', isHot: false, isTest: true, isNew: false},
            {title: '数据同步', route: '', isHot: false, isTest: true, isNew: false},
          ]
        },
        {
          title: '平台案例',
          dataList: [
            {title: 'SPeed TALK 协同办公', route: '', isHot: true, isTest: false, isNew: false},
            {title: 'SPeed Transit 中转仓速递', route: '', isHot: false, isTest: false, isNew: false},
            {title: 'SPeed Credit 信贷系统', route: '', isHot: false, isTest: false, isNew: false},
          ]
        },
        {
          title: '低代码平台',
          dataList: [
            {title: '代码生成', route: '', isHot: true, isTest: false, isNew: false},
          ]
        },
      ]
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;

  .top {
    z-index: 100;
    display: flex;
    width: 100%;
    height: 60px;
    background-color: white;
    border-bottom: gray 1px solid;
    position: fixed;
    top: 0;
    left: 0;
    transition: background .3s;
    border-bottom: 1px solid rgba(61, 61, 61, .15);

    .header-title {
      display: flex;
      width: 200px;
      height: 100%;

      .header-avatar {
        display: flex;
        width: 40%;
        height: 100%;

        img {
          margin: auto;
          width: 60%;
          height: 60%;
          border-radius: 2px;
        }
      }

      .header-name {
        display: flex;
        width: 60%;
        height: 100%;

        .text {
          font-weight: bolder;
          margin: auto;
          color: #181818;
          font-size: 14px;
        }
      }
    }

    .header-nav-left {
      display: flex;
      width: 60%;
      height: 100%;
      background: hsla(0, 0%, 100%, .1);
      transition: background .3s;
      border-right: 1px solid rgba(61, 61, 61, .15);
      justify-content: space-evenly;

      .nav-item {
        display: flex;
        width: available;
        height: 100%;

        .text {
          margin: auto;
          color: #181818;
          font-size: 14px;
        }

        .text:hover {
          color: #1890ff;
        }
      }
    }

    .header-search {
      display: flex;
      width: 5%;
      height: 100%;
      background: hsla(0, 0%, 100%, .1);
      transition: background .3s;
      border-right: 1px solid rgba(61, 61, 61, .15);

      img {
        margin: auto;
        width: 20px;
        height: 20px;
      }
    }

    .header-nav-right {
      display: flex;
      width: 24%;
      height: 100%;
      background: hsla(0, 0%, 100%, .1);
      transition: background .3s;
      border-right: 1px solid rgba(61, 61, 61, .15);

      .nav-item {
        display: flex;
        width: 100px;
        height: 100%;

        .text {
          margin: auto;
          color: #181818;
          font-size: 14px;
        }

        .text:hover {
          color: #1890ff;
        }
      }
    }

    .header-right {
      display: flex;
      width: 8%;
      height: 100%;
      background-color: rgb(255, 85, 0);

      .text {
        margin: auto;
        color: white;
        font-size: 14px;
      }
    }
  }

  .drawer-content {
    margin-top: 60px;
    width: 100%;
    height: 600px;
    display: flex;

    .left {
      width: 16%;
      height: 100%;
      background-color: rgba(220, 220, 220, 0.23);

      .side-title {
        width: 100%;
        height: 60px;
        font-size: 16px;
        font-weight: bold;
        color: #000000;
        display: flex;

        .text {
          padding: 20px 0px 0px 30px;
        }
      }

      .side-item-body {
        overflow-y: scroll;
        width: 100%;
        height: 600px;
        display: flex;
        flex-direction: column;

        .text-wrap {
          cursor: pointer;
          margin-top: 10px;
          display: flex;
          width: 100%;
          height: 30px;
          flex-direction: column;

          .side-text {
            width: max-content;
            font-size: 14px;
            margin-left: 30px;
            color: #1890ff;
            position: relative;
            text-decoration: none;
          }

          .side-text:before {
            content: "";
            position: absolute;
            left: 0%;
            bottom: -6px;
            width: 0;
            height: 2.5px;
            background: #1890ff;
            transition: all .5s;
          }

          .side-text:hover:before {
            width: 100%;
            left: 0;
            right: 0;
          }
        }
      }

      .side-item-body::-webkit-scrollbar {
        width: 0px;
      }

      .side-item-body::-webkit-scrollbar-track {
        background-color: #DDDDDD;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
      }

      .side-item-body::-webkit-scrollbar-thumb {
        background-color: grey;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
      }
    }

    .right {
      width: 84%;
      height: 100%;
      display: flex;
      flex-direction: column;

      .search-input {
        width: 98%;
        height: 70px;

        .input {
          margin: 20px 30px;
          width: 96%;
        }
      }

      .search-content {
        margin: auto;
        width: 98%;
        height: 460px;
        display: flex;

        .module-item-content {
          margin-left: 20px;
          width: 20%;
          height: 100%;

          .module-title {
            color: black;
            font-weight: bold;
            font-size: 14px;
          }

          .module-item {
            cursor: pointer;
            width: 100%;
            height: 40px;

            .text {
              color: black;
              font-size: 13px;
              display: flex;

              .left-text {

              }

              .right-tag {
                margin-left: 10px;
              }
            }

            .text:hover {
              color: #1890ff;
            }
          }

          .module-item-body {
            overflow-y: scroll;
            width: 100%;
            height: 400px;
          }

          .module-item-body::-webkit-scrollbar {
            width: 2px;
          }

          .module-item-body::-webkit-scrollbar-track {
            /*background-color: #DDDDDD;*/
            -webkit-border-radius: 2em;
            -moz-border-radius: 2em;
            border-radius: 2em;
          }

          .module-item-body::-webkit-scrollbar-thumb {
            /*background-color: #1890ff;*/
            -webkit-border-radius: 2em;
            -moz-border-radius: 2em;
            border-radius: 2em;
          }
        }

      }
    }
  }
}
</style>
